"use client"

import { useAuth } from '@/contexts/auth-context'
import { Button } from '@/components/ui/button'
import Link from "next/link"

const mockCooperations = [
  {
    id: 1,
    title: "寻找AI算法工程师合作伙伴",
    description: "我们是一个专注于计算机视觉的团队，正在开发智能监控系统，寻找有经验的AI算法工程师加入",
    organizer: "VisionTech Team",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "技术合作",
    skills: ["深度学习", "计算机视觉", "Python", "TensorFlow"],
    location: "北京",
    type: "长期合作",
    budget: "面议",
    deadline: "2024-02-28",
    applicants: 23,
    status: "招募中",
    tags: ["AI", "算法", "计算机视觉"],
    createdAt: "2024-01-15",
  },
  {
    id: 2,
    title: "区块链DeFi项目寻求前端开发者",
    description: "我们正在开发一个创新的DeFi协议，需要有Web3经验的前端开发者协助构建用户界面",
    organizer: "DeFi Innovators",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "项目合作",
    skills: ["React", "Web3.js", "Solidity", "DeFi"],
    location: "远程",
    type: "项目制",
    budget: "10-20万",
    deadline: "2024-03-15",
    applicants: 15,
    status: "招募中",
    tags: ["区块链", "DeFi", "前端"],
    createdAt: "2024-01-12",
  },
  {
    id: 3,
    title: "教育科技创业团队招募",
    description: "致力于用AI技术改变教育，寻找志同道合的技术合伙人和产品经理",
    organizer: "EduAI Startup",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "创业合作",
    skills: ["AI/ML", "产品设计", "教育行业", "创业经验"],
    location: "上海",
    type: "股权合作",
    budget: "股权分配",
    deadline: "2024-04-01",
    applicants: 31,
    status: "招募中",
    tags: ["创业", "教育", "AI"],
    createdAt: "2024-01-10",
  },
  {
    id: 4,
    title: "开源项目维护者招募",
    description: "我们的开源机器学习框架需要更多维护者，欢迎对开源有热情的开发者加入",
    organizer: "ML Framework Community",
    avatar: "/placeholder.svg?height=40&width=40",
    category: "开源合作",
    skills: ["Python", "机器学习", "开源贡献", "社区运营"],
    location: "全球远程",
    type: "志愿者",
    budget: "无偿",
    deadline: "长期有效",
    applicants: 8,
    status: "招募中",
    tags: ["开源", "机器学习", "Python"],
    createdAt: "2024-01-08",
  },
]

export default function CooperationPage() {
  const { user, isLoading } = useAuth()

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center pt-20">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-white"></div>
      </div>
    )
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center pt-20">
        <div className="glass border-white/20 p-8 text-center max-w-md mx-auto rounded-lg">
          <h2 className="text-2xl font-bold text-white mb-4">请先登录</h2>
          <p className="text-white/70 mb-6">您需要登录才能访问合作招募</p>
          <Link href="/auth/login">
            <Button className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700">
              前往登录
            </Button>
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen pt-20">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">合作招募</h1>
        <div className="grid gap-6">
          {mockCooperations.map((cooperation) => (
            <div key={cooperation.id} className="p-6 border rounded-lg">
              <h2 className="text-xl font-semibold mb-2">{cooperation.title}</h2>
              <p className="text-gray-600 mb-4">{cooperation.description}</p>
              <div className="flex flex-wrap gap-2">
                {cooperation.tags.map((tag) => (
                  <span key={tag} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
